<template>
  <div class="pro-table-simple">
    <n-data-table
      ref="dataTableInst"
      v-bind="props"
      :columns="(tableColumns as any)"
      :data="props.data.length ? props.data : tableData"
      :loading="tableLoading"
      :pagination="false"
    />

    <div class="pro-table-simple_pagination">
      <table-pagination
        v-if="pagination"
        v-model:page="pageIndex"
        v-model:size="pageSize"
        :pagination="pagination"
        :total="props.data.length ? props.total : dataTotal"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { DataTableInst, NDataTable } from 'naive-ui'
  import { proTableProps } from './props'
  import { useColumnRender } from './hooks/useColumnRender'
  import TablePagination from './components/table-pagination/index.vue'

  const emits = defineEmits<{
    (e: 'pageIndexChange', value: number): void
    (e: 'pageSizeChange', value: number): void
  }>()
  const props = defineProps(proTableProps)

  const dataTableInst = ref<DataTableInst | null>(null)

  const tableLoading = ref(false)
  const pageIndex = ref(props.defaultPageIndex)
  const pageSize = ref(props.defaultPageSize)
  const queryParams = ref<Record<string, any>>({})
  const tableData = ref<any[]>([])
  const dataTotal = ref(0)

  const tableColumns = computed(() => {
    return useColumnRender({
      columns: props.columns,
      columnsAlign: props.columnsAlign,
      pageIndex,
      pageSize
    })
  })

  watch(pageIndex, () => {
    emits('pageIndexChange', pageIndex.value)
    requestTableData()
  })

  watch(pageSize, () => {
    emits('pageSizeChange', pageSize.value)
    requestTableData()
  })

  const requestTableData = async (isStatic = false) => {
    try {
      if (props.data?.length || !props.request) return
      if (!isStatic) {
        tableLoading.value = true
      }
      const { data = [], total = 0 } = await props.request(
        {
          pageIndex: pageIndex.value,
          pageSize: pageSize.value
        },
        queryParams.value
      )
      tableData.value = data
      dataTotal.value = total
    } catch (e) {
      console.log(e)
    } finally {
      if (!isStatic) {
        tableLoading.value = false
      }
    }
  }

  requestTableData()

  defineExpose({
    reload: () => requestTableData(),
    staticReload: () => requestTableData(true),
    setPageIndex: (index: number) => {
      pageIndex.value = index
    },
    setPageSize: (size: number) => {
      pageSize.value = size
    },

    // DataTable自带的方法
    clearFilters: () => dataTableInst.value?.clearFilters(),
    clearSorter: () => dataTableInst.value?.clearFilters(),
    filters: (filters) => dataTableInst.value?.filters(filters),
    scrollTo: (options) => dataTableInst.value?.scrollTo(options),
    sort: (columnKey, order) => dataTableInst.value?.sort(columnKey, order),
    page: (page) => dataTableInst.value?.page(page)
  })
</script>

<style lang="less" scoped>
  .pro-table-simple {
    .pro-table-simple_pagination {
      margin-top: 15px;
    }
  }
</style>
